<template>
    <div class="warehouse-details">
        <el-drawer v-model="dialogVisible" title="仓库详情" size="1200px" :with-header="false" direction="rtl">
            <div class="drawer-header">
                <div class="title">{{ detailsObj.no || 'XS240302001' }}</div>
                <!-- <el-button plain @click="dialogVisible = false">
                    <el-icon>
                        <Close />
                    </el-icon>
                </el-button> -->
            </div>

            <div class="drawer-content">
                <div class="tab-header">
                    <div class="warehouse-info">
                        <div class="info-item">
                            <div class="label">订单类型</div>
                            <div class="value">{{ detailsObj.source_type_text || '出库单' }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">关联出库单/采购退货单</div>
                            <div class="value">{{ detailsObj.source_no || 'XS240212001' }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">出库/采购退货日期</div>
                            <div class="value">{{ detailsObj.date || '2022-06-02' }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">客户</div>
                            <div class="value">{{ detailsObj.contact_name || '建安管理站' }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">出库/采购退货负责人</div>
                            <div class="value">{{ detailsObj.contact_name || '刘一' }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">联系电话</div>
                            <div class="value">{{ detailsObj.contact_phone || '13567890980' }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">备注</div>
                            <div class="value">{{ detailsObj.note || '--' }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">状态</div>
                            <div class="value">
                                <el-tag :type="getStatusType(detailsObj.status)">
                                    {{ detailsObj.status_text || '部分出库' }}
                                </el-tag>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-container">
                    <el-tabs v-model="activeTab" @tab-click="handleRemoveTab">
                        <el-tab-pane label="基础信息" name="basic">
                            <div class="info-section">
                                <div class="section-title">
                                    <el-icon>
                                        <ArrowDown />
                                    </el-icon>
                                    <span>基础信息</span>
                                </div>
                                <div class="info-grid">
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">订单类型</span>
                                            <span class="value">{{ detailsObj.source_type_text || '出库单' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">出库单号</span>
                                            <span class="value">{{ detailsObj.no || 'XS240212001' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">出库/采购退货日期</span>
                                            <span class="value">{{ detailsObj.date || '2022-06-02' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">客户</span>
                                            <span class="value">{{ detailsObj.contact_name || '建安管理站' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">采购/退货负责人</span>
                                            <span class="value">{{ detailsObj.contact_name || '刘一' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">联系电话</span>
                                            <span class="value">{{ detailsObj.contact_phone || '13567890980' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">状态</span>
                                            <span class="value">
                                                <el-tag :type="getStatusType(detailsObj.status)">
                                                    {{ detailsObj.status_text || '部分出库' }}
                                                </el-tag>
                                            </span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">备注</span>
                                            <span class="value">{{ detailsObj.note || '--' }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="info-section">
                                <div class="section-title">
                                    <el-icon>
                                        <ArrowDown />
                                    </el-icon>
                                    <span>系统信息</span>
                                </div>
                                <div class="info-grid">
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">创建人</span>
                                            <span class="value">{{ detailsObj.creator_name || '张三' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">创建时间</span>
                                            <span class="value">{{ detailsObj.created_at || '2025-07-08 17:43:32' }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">审核人</span>
                                            <span class="value">{{ detailsObj.audit_admin_name || '测试1' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">审核时间</span>
                                            <span class="value">{{ detailsObj.audited_at || '2025-07-10 15:38:41' }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane label="入库记录" name="inbound-record">
                            <div class="record-content">
                                <div class="search-bar">
                                    <el-input @input="handleRemoveTab({index:1},true)" v-model="recordSearch" placeholder="入库单号/订单类型/仓库名称" style="width: 300px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                </div>

                                <div class="record-list inbound-list">
                                    <div v-for="(record, idx) in storeData" :key="record.recordNo"
                                        class="accordion-item">
                                        <!-- 主表头 -->
                                        <div class="accordion-header" :class="{ expanded: expandedIndex === idx }"
                                            @click="toggleExpand(idx,record)">
                                            <el-icon class="arrow" :class="{ expanded: expandedIndex === idx }">
                                                <svg viewBox="0 0 1024 1024" width="16" height="16">
                                                    <path d="M384 192l256 320-256 320z" fill="currentColor" />
                                                </svg>
                                            </el-icon>
                                            <span class="main-field">入库单号：{{ record.no || '' }}</span>
                                            <span class="main-field">入库仓库：{{ record.warehouse.name }}</span>
                                            <span class="main-field">入库日期：{{ record.created_at }}</span>
                                            <span class="main-field">操作人：{{ record.creator_name }}</span>
                                            <span class="main-field">操作时间：{{ record.in_date }}</span>
                                        </div>
                                        <!-- 明细表，带动画 -->
                                        <transition name="expand">
                                            <div v-show="expandedIndex === idx" class="accordion-body">
                                                <el-table loading-text="加载中"  v-loading="loading"   :data="record.products" border style="width: 100%;">
                                                    <el-table-column prop="open_unit_name" label="产品名称" align="center" >
                                                        <template #default="{ row }">
                                                            <span>{{ row.product_name }}</span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column prop="specification" label="规格型号" align="center" />
                                                    <el-table-column prop="spu_measure_unit_name" label="单位" align="center" />
                                                    <el-table-column prop="status" label="入库状态" width="100" align="center">
                                                        <template #default="{ row }">
                                                            <el-tag v-if="row.status == 1" type="danger">未入库</el-tag>
                                                            <el-tag v-if="row.status == 2" type="warning">部分入库</el-tag>
                                                            <el-tag v-if="row.status == 3" type="success">全部入库</el-tag>
                                                            <el-tag v-if="row.status == 4" type="danger"> 容错入库</el-tag>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column prop="num_before" label="待入库数量" align="center" />
                                                    <!-- <el-table-column prop="inQuantity" label="本次入库数量" /> -->
                                                    <el-table-column prop="note" label="备注" align="center" />
                                                </el-table>
                                            </div>
                                        </transition>
                                    </div>
                                </div>


                            </div>
                        </el-tab-pane>

                    </el-tabs>
                </div>
            </div>
        </el-drawer>

        <ConsumablesSetup ref="consumablesSetupRef" v-model:dialogVisible="isShow" :dialogType="dialogType"
            :dialogRow="dialogRow" />
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ArrowDown, Close, Search, RefreshRight, Download, Plus, Expand, Fold } from '@element-plus/icons-vue';
import ConsumablesSetup from './ConsumablesSetup.vue';
import api from '@/api';

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    dialogRow: {
        type: Object,
        default: () => ({})
    }
});
const isShow = ref<boolean>(false);
let dialogType = ref<string>('');
let dialogRow = ref<any>({});
const emit = defineEmits(['update:dialogVisible']);

const dialogVisible = computed({
    get: () => props.dialogVisible,
    set: (val) => emit('update:dialogVisible', val)
});

const activeTab = ref<string>('basic');
const recordSearch = ref<string>('');
let loading = ref<boolean>(false);
let storeData = ref<any>({});

// 获取状态对应的标签类型
const getStatusType = (status: number) => {
    switch (status) {
        case 1: return 'success'; // 已出库
        case 2: return 'warning'; // 部分出库
        case 3: return 'danger';  // 全部出库
        default: return 'info';
    }
};

const handleRemoveTab = async (target: any,is=false) => {
    if (target.index == 1 || is) {
        let res = await api.product.product_in_record({
            id: props.dialogRow.id,
            keyword: recordSearch.value
        });
        if (res.code == 200) {
            storeData.value = res.data.data;
        }
    }
}

const expandedIndex = ref<number | null>(null);

interface RecordItem {
    id: number;
    no: string;
    warehouse: any;
    created_at: string;
    creator_name: string;
    products: any[];
}

async function toggleExpand(idx: number,record:RecordItem) {
    loading.value = true;
    let res = await api.product.product_in_record_detail({
        id: record.id
    });
    if(res.code == 200){
        let ids = storeData.value.filter((item:RecordItem)=>item.id == record.id);
        storeData.value.forEach((item:RecordItem)=>{
            if(item.id == ids[0].id){
                item['products'] = res.data.product_in_item;
                console.log(res.data,'res.data',item);
                // item.products = res.data;
            }
        });
        console.log(storeData.value,'s333333sxswww');
        setTimeout(()=>{
            loading.value = false;
        },500)
    }

    expandedIndex.value = expandedIndex.value === idx ? null : idx;
}

watch(dialogVisible, (newVal) => {
    if (newVal) {
        getDetails();
    }else{
        storeData.value = {};
        //清空数据
        for(let key in detailsObj.value){
            detailsObj.value[key] = '';
        }
    }
});

interface ProductItem {
    id: number;
    in_num: string;
    num: string;
    order_id: number;
    product_id: number;
    product_name: string;
    product_no: string;
    ren_num: string;
    specification: string;
    spu_name: string;
    unit: string;
}

interface DetailsObj {
    id: number;
    no: string;
    source_type: string;
    source_type_text: string;
    source_id: number;
    source_no: string;
    status: number;
    status_text: string;
    date: string;
    note: string;
    creator_name: string;
    created_at: string;
    contact_name: string;
    contact_phone: string;
    audited_at: string;
    audit_admin_name: string;
    products?: ProductItem[];
}

//调用详情
const detailsObj = ref<DetailsObj>({} as DetailsObj);
const getDetails = async () => {
    // 将props.dialogRow转换为DetailsObj类型
    detailsObj.value = {
        id: props.dialogRow.id || 0,
        no: props.dialogRow.no || '',
        source_type: props.dialogRow.source_type || '',
        source_type_text: props.dialogRow.source_type_text || '',
        source_id: props.dialogRow.source_id || 0,
        source_no: props.dialogRow.source_no || '',
        status: props.dialogRow.status || 0,
        status_text: props.dialogRow.status_text || '',
        date: props.dialogRow.date || '',
        note: props.dialogRow.note || '',
        creator_name: props.dialogRow.creator_name || '',
        created_at: props.dialogRow.created_at || '',
        contact_name: props.dialogRow.contact_name || '',
        contact_phone: props.dialogRow.contact_phone || '',
        audited_at: props.dialogRow.audited_at || '',
        audit_admin_name: props.dialogRow.audit_admin_name || '',
        products: props.dialogRow.products || []
    };
    
    return;
    const res = await api.product.product_in_detail({
        id: props.dialogRow.id
    });
    if (res.code == 200) {
        detailsObj.value = res.data;
    }
}

</script>

<style lang="scss" scoped>
::v-deep .inventory-layout .product-category .category-list .el-menu-item.is-active {
    color: #6860FF !important;
    background-color: #6860ff15 !important;

}


//表格样式
::v-deep .product-list {
    .el-table {
        --el-table-header-bg-color: rgba(235, 236, 240, 1);

        th {
            color: #444;
            font-weight: bold;
        }
    }

}

//表格样式
::v-deep .inbound-list {
    .el-table {
        --el-table-header-bg-color: rgba(235, 236, 240, 1);

        th {
            color: #444;
            font-weight: bold;
        }
    }


}

//分页样式
.pagination {
    width: calc(100% - 1000px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;

}


.warehouse-details {
    .drawer-header {
        padding: 16px 20px;
        border-bottom: 1px solid #E4E7ED;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
    }

    .drawer-content {
        height: calc(100% - 60px);
        overflow-y: auto;

        .tab-header {
            padding: 20px;
            background-color: #F5F7FA;

            .warehouse-info {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;

                .info-item {
                    min-width: 140px;

                    .label {
                        color: #909399;
                        margin-right: 8px;
                        margin-bottom: 4px;
                    }

                    .value {
                        color: #333;
                        font-weight: 500;
                        font-size: 14px;
                    }
                }
            }
        }

        .tab-container {
            padding: 20px;

            :deep(.el-tabs__header) {
                margin-bottom: 20px;
            }
        }

        .info-section {
            margin-bottom: 24px;

            .section-title {
                background-color: #F5F7FA;
                padding: 12px 10px;
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 16px;
                font-size: 14px;
                font-weight: bold;
                color: #333;

                .el-icon {
                    font-size: 16px;
                    color: #626aef;
                }
            }

            .info-grid {

                padding: 16px;
                border-radius: 4px;

                .info-row {
                    display: flex;
                    margin-bottom: 16px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .info-col {
                        flex: 1;
                        display: flex;
                        align-items: center;

                        &.full-width {
                            flex: 2;
                        }

                        .label {
                            width: 120px;
                            color: #909399;
                            flex-shrink: 0;
                            margin-left: 10px;
                        }

                        .value {
                            color: #333;
                            flex: 1;
                            display: inline-block;
                            padding: 6px;
                            font-size: 14px;
                            background-color: #F5F7FA;
                        }
                    }
                }
            }
        }
    }
}

:deep(.el-drawer) {
    .el-drawer__body {
        padding: 0;
    }
}

:deep(.el-tabs__nav-wrap::after) {
    height: 1px;
}

:deep(.el-tabs__active-bar) {
    background-color: #626aef;
}

:deep(.el-tabs__item.is-active) {
    color: #626aef;
}

:deep(.el-tabs__item:hover) {
    color: #626aef;
}

.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .right-buttons {
        display: flex;
        gap: 8px;
    }

    .filter-buttons {
        margin-left: 16px;
    }
}

.product-list,
.inbound-list,
.record-list {
    margin-bottom: 16px;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
}

:deep(.el-table) {
    --el-table-header-bg-color: #F5F7FA;

    th {
        background-color: var(--el-table-header-bg-color);
        color: #606266;
        font-weight: 500;
    }
}

:deep(.el-button) {
    &.is-plain {
        &:hover {
            color: #626aef;
            border-color: #626aef;
        }
    }
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #626aef;
    border-color: #626aef;
    box-shadow: -1px 0 0 0 #626aef;
}

.inventory-layout {
    display: flex;
    height: 100%;

    .product-category {
        width: 200px;
        border-right: 1px solid var(--el-border-color-light);
        transition: width 0.3s;
        background-color: rgb(245, 247, 249);
        padding: 0px 12px;
        margin-right: 10px;

        &.is-collapsed {
            width: 0;
            overflow: hidden;
        }

        .category-header {
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--el-border-color-light);

            .header-title {
                display: flex;
                align-items: center;
                gap: 90px;
                justify-content: space-between;
                font-size: 14px;
                font-weight: 500;
            }
        }

        .category-search {
            padding: 12px;
            border-bottom: 1px solid var(--el-border-color-light);
        }

        .category-list {
            .el-menu {
                border-right: none;
            }

            .el-menu-item {
                height: 40px;
                line-height: 40px;

                &.is-active {
                    background-color: var(--el-color-primary-light-9);
                    color: var(--el-color-primary);
                }
            }
        }
    }

    .product-content {
        flex: 1;

        transition: margin-left 0.3s;

        &.is-expanded {
            margin-left: 0;
        }

        .search-bar {
            margin-bottom: 16px;
        }
    }
}

// 表格样式优化
.product-list {
    :deep(.el-table) {
        --el-table-header-bg-color: #F5F7FA;

        th {
            background-color: var(--el-table-header-bg-color);
            color: #606266;
            font-weight: 500;
        }
    }
}

.accordion-item {
    border-radius: 4px;
    background: rgb(244, 245, 247);
    margin-bottom: 16px;


    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 48px;
    cursor: pointer;
    background: rgb(244, 245, 247);
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    transition: background 0.2s;

    .arrow {
        margin-right: 12px;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        color: #999;

        &.expanded {
            transform: rotate(90deg);
            color: #626aef;
        }
    }

    &.expanded {
        background: #f5f7fa;
    }

    .main-field {
        margin-right: 32px;
        min-width: 140px;
        white-space: nowrap;
    }
}

.accordion-body {
    padding: 0 0 20px 0;
    background: #fff;
    animation: fadeIn 0.3s;
}

.expand-enter-active,
.expand-leave-active {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
    overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
    max-height: 0;
    opacity: 0;
}

.expand-enter-to,
.expand-leave-from {
    max-height: 500px;
    opacity: 1;
}

.status-un {
    color: #666;
}

.status-part {
    color: #ff9900;
}

.status-all {
    color: #13ce66;
}

.operation-list {
    padding: 16px 0 0 0;
}

.operation-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
        border-bottom: none;
    }

    .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 16px;
        background: #f5f7fa;
        border: 1px solid #eee;
    }

    .user {
        color: #333;
        font-weight: 500;
        margin-right: 18px;
    }

    .warehouse {
        color: #666;
        margin-right: 18px;
    }

    .time {
        color: #999;
        margin-right: 24px;
        font-size: 14px;
    }

    .desc {
        color: #333;

        .order-link {
            color: #144b9e;
            cursor: pointer;
            margin-left: 2px;

            &:hover {
                text-decoration: underline;
                color: #3a5fff;
            }
        }
    }
}
</style>
